<script setup lang="ts">
import {ref, onMounted} from "vue";
import * as echarts from "echarts";

// 绑定 DOM 的 ref
const chartRef1 = ref<HTMLDivElement | null>(null); // Vue 3 推荐使用 `ref()`
const chartRef2 = ref<HTMLDivElement | null>(null); // Vue 3 推荐使用 `ref()`
const chartRef3 = ref<HTMLDivElement | null>(null); // Vue 3 推荐使用 `ref()`

// 存储 ECharts 实例
const chartInstance1 = ref<echarts.ECharts | null>(null);
const chartInstance2 = ref<echarts.ECharts | null>(null);
const chartInstance3 = ref<echarts.ECharts | null>(null);

onMounted(() => {
  // if (!chartRef.value) return; // 确保 DOM 已渲染

  // 初始化 ECharts
  chartInstance1.value = echarts.init(chartRef1.value);
  chartInstance2.value = echarts.init(chartRef2.value);
  chartInstance3.value = echarts.init(chartRef3.value);

  // 设置图表配置
  chartInstance1.value.setOption(option);
  chartInstance2.value.setOption(option2);
  chartInstance3.value.setOption(option2);
});

const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
}
const option2 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "we", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [12, 32, 32, 4123, 123, 12, 31],
      type: "line",
    },
  ],
}
</script>

<template>
  <div class="container">
    <div ref="chartRef1" class="chart1 box"></div>
    <div ref="chartRef2" class="chart2 box"></div>
    <div ref="chartRef3" class="chart3 box"></div>
  </div>
</template>


<style scoped>

.container {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-row-gap: 10px;
  align-content: center;
}

.box {
  height: 45vh;
}

.chart2 {
}
</style>
